<template>
	<view >
		<view class="man">
			<view class="info_contain">
				<div style="display: flex;" >
					<view class="uni-media-list-logo phto" @click="navToUrl('/pages/user/avatar')">
						<image :src="avatar" :lazy-load="true" style="border-radius: 35px; border:1px solid #CCC; background: #FFF;" />
					</view>
					<view class="header-msg" @click="navToUrl('/pages/user/vip')">
						<view class="header-msg-top" style="display: flex;flex-direction:column">
							<view style="display: flex;align-items: center;gap: 20rpx;margin-bottom: 10rpx">
								<view style="font-size: 42rpx;font-weight: bold;">{{userinfo.level_name}}</view>
								<image src="@/static/images/ui-11/3.png" style="width: 140rpx;height: 40rpx"></image>
							</view>
							<view class="user-name">{{ userinfo.username }}</view>
						</view>
					</view>
				</div>
			</view>
			<view class="vipjd">
				<view class="jdt">
					<view class="cj">{{levelinfo.name}}</view>
					<view class="gj">{{levelinfo.nextlevelname}}</view>
				</view>
				<view class="progress-bar">
					<view class="progress-bar-inner" :style="{ width: progress + '%' }"></view>
				</view>
			</view>
		</view>
		<view class="grade">
			<view class="title">
				<view class="icon"></view>
				<view class="text">等级权益</view>
			</view>
			<view class="cont">{{levelinfo.tjtext}}</view>
		</view>
		<view class="tablebox">
			<view class="title">
				<view class="co1"></view>
				<view class="co2">等级加成率</view>
				<view class="co3">签约额度</view>
				<view class="co4">升级条件</view>
			</view>
			<view class="cont">
				<view class="list" v-for="(item, index) in vipList" :index="index" :key="index"  >
					<view class="co1">
						<img class="icon" :src="'/static/images/ui-35/'+(index + 1)+'.png'"/>
						<view class="text">{{item.levelname}}</view>
					</view>
					<view class="co2">{{item.levelrate.replaceAll('等级加成率：','')}}</view>
					<view class="co3">{{item.maxbuy.replaceAll('签约额度：','')}}</view>
					<view class="co4">{{item.levelup.replaceAll('升级条件：','')}}</view>
				</view>
				 
			</view>
		</view>
	</view>
</template>

<script>
    export default {
		data() {
			return {
				enablelevelup: !0,
				userinfo:[],
				levelinfo:[],
				avatar:'',
				vippic:'',
				canup:0,
				level: 'VIP0',
				current: 0,
				vipList: [],
				progress: 0
			};
		},
		onLoad: function (option) {
			this.helper.checkLogin();
			this.getData();
			this.loadList();
		},
		methods: {
			navToUrl: function(url) {
				return uni.navigateTo({
					url: url
				});
			},
			imageError: function(e) {
				this.avatar = '/static/icon_avatar.png';
			},
			getData:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['username='+info.username,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getUserInfo",
					timestamp:timestamp,
					data:{username:info.username,token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.userinfo = res.data.data.userinfo;
					if(this.userinfo.avatar){
						this.avatar = this.weburl + this.userinfo.avatar;
					}
					setTimeout(() => {
						uni.hideLoading();
					}, 300);
				})
			},
			loadList:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getVIPLevel",
					timestamp:timestamp,
					data:{token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.levelinfo = res.data.data.levelinfo;
					this.progress = this.levelinfo.progress
					this.vipList = res.data.data.vipList;
					if (this.levelinfo.needtj == 0){
						this.enablelevelup = !1;
					}else{
						this.enablelevelup = !0;
					}
					setTimeout(() => {
						uni.hideLoading();
					}, 300);
				})
			},
			upgrade: function() {
				this.enablelevelup = !0;
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['timestamp='+timestamp,'token='+info.token]);
				this.helper.req({
					api:"doLevelUp",
					timestamp:timestamp,
					data:{token:info.token},
					header:{sign:sign},
					method:'POST',
				}).then(res=>{
					
					uni.showModal({
						title: "提示",
						content: res.data.data,
						showCancel:false,
						confirmText: "确定",
						success:function(res){
							console.log('jin');
						this.enablelevelup = !0;
						}
					})
				})
			},			
			swiperChange: function(e){
				var current = e.detail.current
				console.log("current:", current)
				this.current = current
			}
		},

	};
</script>

<style lang="scss">
page{
	background-color: #ddeafd;
}
.info_contain{
	display: flex;
	justify-content: space-between;
	color: #fff;
	.phto {
		width: 106upx;
		height: 106upx;
		margin-left: 30 upx;
		margin-right: 30 upx;
	}
	.header-msg {
		padding-left: 10px;
	}
}
.man{
	display: block;
	padding: 50rpx 50rpx 0 50rpx;
	height: 372rpx;
	background: linear-gradient(to bottom, #2eaef1, #6e9efd);
	position: relative;
	 z-index: 10;
	.vipjd{
		width: 92%;
		margin: 0 30rpx;
		height: 210rpx;
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100%;
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 0;
		bottom: -42rpx;
		 z-index: 10;
		padding: 0 20rpx;
		.progress-bar {
			width: 100%;
			height: 10rpx;
			background: #fff;
			border-radius: 10rpx;
			position: relative;
		}
		.progress-bar-inner {
			position: absolute;
			left: 0;
			bottom: 0;
			top: 0;
			background: linear-gradient(to right, #4f8efd 90%, #fff);
		}
		 .jdt{
			 padding-top: 40rpx;
			 display: flex;
			 justify-content: space-between;
			 .njd{
				 width: 100%;
				 height:9rpx ;
				 background: linear-gradient(to right, #4f8efd, #fff);
			 }
			 .cj{
				width: 150rpx;
				height: 80rpx;
				background-image: url('');
				background-repeat: no-repeat;
				background-size: 100%;
				text-align: center;
				color: #fff;
				line-height: 60rpx;
			 }
			 .gj{
				width: 150rpx;
				height: 80rpx;
				background-image: url('');
				background-repeat: no-repeat;
				background-size: 100%;
				text-align: center;
				color: #fff;
				line-height: 60rpx;
			 }
		 }
	}
}

.grade{
	margin: 30rpx;
	 .title{
		 display: flex;
		 align-items: center;
		 .icon{
			 width: 10rpx;
			 height: 60rpx;
			 background: linear-gradient( #ddeafd 1%, #4f8efd);
			 border-radius: 20rpx;
		 }
		 .text{
			 color: #4188ff;
			 font-size: 40rpx;
			 margin-left: 20rpx;
		 }
	 }
	 .cont{
		 margin-top: 50rpx;
		 height: 100rpx;
		 background-image: url('');
		 background-size: 100%;
		 background-repeat: no-repeat;
		 line-height: 65rpx;
		 text-align: center;
		 color: rgba(53, 53, 53, .8);
	 }
}
.tablebox{
	margin: 0 30rpx;
	box-shadow: inset 0 0 17px 7px rgba(255,255,255, 0.7);
	border-radius: 20rpx;
	.title{
		display: flex;
		height: 80rpx;
		align-items: center;
		border-radius: 20rpx 20rpx 0 0;
		background: linear-gradient(to bottom, #7b53cd, #5495fc);
		color: #fff;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		line-height: 30rpx;
		.co1{
			width: 180rpx;
		}
		.co2{
			width: 140rpx;
		}
		.co3{
			width: 140rpx;
		}
		.co4{
			width: 200rpx;
		}
	}
	.cont{
		.list{
			display: flex;
			align-items: center;
			border-bottom: 1px solid #fff;
			&:last-child {
				border-bottom: none;
			}
			.co1,.co2,.co3,.co4 {
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: rgba(53, 53, 53, .8);
			}
			.co1{
				width: 180rpx;
				border-right: 1px solid #fff;
				gap: 10rpx;
				color: rgb(77, 141, 253);
				font-weight: bold;
				.icon {
					width: 40rpx;
					height: 40rpx;
				}
			}
			.co2{
				width: 140rpx;
				border-right: 1px solid #fff;
			}
			.co3{
				width: 140rpx;
				border-right: 1px solid #fff;
			}
			.co4{
				width: 200rpx;
				padding-left:40rpx;
			}
		}
	}
	
}
</style>
